<template>
  <div style="width: 1200px;margin: 0 auto">
    <!-- 顶部面包屑标识与导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;margin-top: 30px">
      <h1 style="text-align: left">{{ this.brand.brandName }}</h1>
    </el-breadcrumb>
    <el-divider></el-divider>
    <div>
      <!-- 品牌介绍 -->
      <el-row :gutter="24">
        <el-col span="12">
          <el-card>
            <img :src="'/images/brand-image/'+this.brand.logo" width="500px">
          </el-card>
        </el-col>
        <el-col span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix" style="text-align: left;font-size: 24px;margin-left: 10px">
              <img :src="'/images/brand-image/'+this.logoImg" alt="" style="position: relative;float: right">
              <span>{{ this.brand.brandName }}</span> &nbsp;
              <div style="font-size: 20px;margin-top: 5px">
                <i class="fas fa-shield-alt" style="color: #4cae4c">品牌官方授权</i>
              </div>
            </div>
            <div style="text-align: left;font-size: 19px;margin-bottom: 10px">

            </div>
            <div style="text-align: left;font-size: 18px;margin-bottom: 10px">
              <span>品牌故事</span>
            </div>
            <div class="text item" style="text-align: left;">
              {{ this.brand.description }}
            </div>
          </el-card>
        </el-col>
      </el-row>
      <h1 style="text-align: left">主要商品</h1>
      <!-- 品牌商品 -->
      <el-divider></el-divider>
      <el-row :gutter="24">
        <el-col :span="4" v-for="p in productBYBrandArr" :key="p.id" style="margin: 10px 0;width: 225px;margin-right: 10px">
          <el-card :body-style="{ padding: '0px'}">
            <el-image style="width: 200px;"
                      :src="JSON.parse(p.pictures)[0].url"
                      @click="loadProductDetails(p.id)"
                      fit="fit">
            </el-image>
            <div style="padding: 14px;" @click="loadProductDetails(p.id)">
              <div class="bottom clearfix">
                  <span class="product_title_span">{{p.title}}</span>
              </div>
              <p style="font-size: 16px;">
                <b>￥{{p.discountPrice}}</b> &nbsp; <s>{{p.originalPrice}}</s>
                <span style="float: right;">销量：{{p.sales}}件</span>
              </p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productArr: [],
      src:'',
      url:[],
      brand: {
        id: '',
        description: '',
        brandName: '',
        sort: '',
        logo: '',
      },
      logoImg: '',
      productBYBrandArr: [],
      brandProductArr: [{
        id:'',
        url:'',
      }],

    }
  },

  methods: {
    //加载brandId
    loadBrandId() {
      this.brand.id = this.$route.query.brandId;
    },
    //加载品牌信息
    loadBrand() {
      let url1 = 'http://localhost:14001/brand/standard?id=' + this.brand.id;
      console.log("url1:" + url1)
      let localJwt = JSON.parse(localStorage.getItem('localJwt'));
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt.token
            }
          })
          .get(url1).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.brand = jsonResult.data;
          this.logoImg = this.brand.logo.split("/")[0];
          this.brand.logo = this.brand.logo.split("/")[1];
        }
      });

    },
    //加载品牌商品
    loadBrandProduct(){
      console.log("brand.id:"+this.brand.id);
      let url2 = 'http://localhost:14001/spu/listByBrandId?brandId='+this.brand.id;
      let localJwt = JSON.parse(localStorage.getItem('localJwt'));
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt.token
            }
          })
          .get(url2).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.productBYBrandArr = jsonResult.data.list;
          for (let i = 0; i < jsonResult.data.list.length; i++) {
            const item = jsonResult.data.list[i];
            this.brandProductArr.push({
              id: item.id,
              url:item.pictures[0]
            });
          }
          console.log(this.brandProductArr);
          // this.brandProductArr = JSON.parse(jsonResult.data.list[0].pictures);
          // console.log(this.brandProductArr);
        }
      });
    },
    //跳转到商品详情
    loadProductDetails(spuId){
      this.$router.push('/sys-user/product/details?spuId=' + spuId);
    }
  },
  mounted() {
    this.loadBrandId();
    this.loadBrand();
    this.loadBrandProduct();
  }
}
</script>

<style scoped>
.product_title_span{
  width: 200px;
  display: inline-block;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis;
}
</style>